<%@ page language="java" contentType="text/html; utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fly Template v3.0，基于 layui 的极简社区页面模版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" href="/fly-3.0/res/layui/css/layui.css">
    <link rel="stylesheet" href="/fly-3.0/res/css/global.css">
</head>
<body>

<%@ include file="../common/header.jsp" %>
<div class="layui-hide-xs">
    <%@ include file="../common/column.jsp" %>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
                <h1>${article.articleTitle}</h1>
                <div class="fly-detail-info">
                    <!-- <span class="layui-badge">审核中</span> -->
                    <span class="layui-badge layui-bg-green fly-detail-column">${article.category.categoryName}</span>
                    <c:if test="${page.content.size()<1||page.content.get(0).commentAccept==1}">
                        <span class="layui-badge" style="background-color: #999;">未结</span>
                        <!-- <span class="layui-badge" style="background-color: #5FB878;">已结</span> -->
                    </c:if>
                    <c:if test="${page.content.size()>=1&&page.content.get(0).commentAccept==0}">
                        <span class="layui-badge" style="background-color: #5FB878;">已结</span>
                    </c:if>
                    <c:if test="${!empty article.articleTop}">
                        <span class="layui-badge layui-bg-black">置顶</span>
                    </c:if>
                    <c:if test="${article.articleStar==1}">
                        <span class="layui-badge layui-bg-red">精帖</span>
                    </c:if>
                    <div class="fly-admin-box" data-id="${article.articleId}">
                        <c:if test="${sessionScope.user.userRoleId==1}">
                            <span class="layui-btn layui-btn-xs jie-admin" type="del">删除</span>

                            <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="1">置顶</span>
                            <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="0" style="background-color:#ccc;">取消置顶</span> -->

                            <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="1">加精</span>
                            <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="0" style="background-color:#ccc;">取消加精</span> -->

                        </c:if>
                    </div>
                    <span class="fly-list-nums">
            <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i>${article.articleCommentNumber}</a>
            <i class="iconfont" title="人气">&#xe60b;</i> ${article.articleClickNumber}
          </span>
                </div>
                <div class="detail-about">
                    <a class="fly-avatar" href="/user/home/${article.owner.userId}/">
                        <img src="${article.owner.userHeadImage}" alt="${article.owner.userName}">
                    </a>
                    <div class="fly-detail-user">
                        <a href="/user/home/${article.owner.userId}/" class="fly-link">
                            <cite>${article.owner.userName}</cite>
                            <i class="iconfont icon-renzheng" title="认证信息：{{ rows.user.approve }}"></i>
                            <i class="layui-badge fly-badge-vip">VIP3</i>
                        </a>
                        <span><f:formatDate value="${article.articleBuildDate}" pattern="yyyy-MM-dd"/></span>
                    </div>
                    <div class="detail-hits" id="LAY_jieAdmin" data-id="${article.articleId}">
                        <span style="padding-right: 10px; color: #FF7200">悬赏：60飞吻</span>
                        <c:if test="${!empty sessionScope.user&&article.articleOver!=1}">
                            <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a
                                    href="/article/edit/${article.articleId}">编辑此贴</a></span>
                        </c:if>
                    </div>
                </div>
                <div class="detail-body photos">
                    ${article.articleContent}
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    <c:forEach items="${page.content}" var="comment">
                        <li data-id="${comment.commentId}" class="jieda-daan">
                            <a name="item-${comment.commentId}"></a>
                            <div class="detail-about detail-about-reply">
                                <a class="fly-avatar" href="/user/home/${comment.commentator.userId}/">
                                    <img src="${comment.commentator.userHeadImage}"
                                         alt="${comment.commentator.userName}">
                                </a>
                                <div class="fly-detail-user">
                                    <a href="" class="fly-link">
                                        <cite>${comment.commentator.userName}</cite>
                                        <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                                        <i class="layui-badge fly-badge-vip">VIP3</i>
                                    </a>

                                        <%--<span>(楼主)</span>--%>
                                    <!--
                                    <span style="color:#5FB878">(管理员)</span>
                                    <span style="color:#FF9E3F">（社区之光）</span>
                                    <span style="color:#999">（该号已被封）</span>
                                    -->
                                </div>

                                <div class="detail-hits">
                                    <span><f:formatDate value="${comment.commentDate}" pattern="yyyy-MM-dd"/></span>
                                </div>
                                <c:if test="${article.comment.commentId==comment.commentId}">
                                    <i class="iconfont icon-caina" title="最佳答案"></i>
                                </c:if>
                            </div>
                            <div class="detail-body jieda-body photos">
                                <p>${comment.commentContent}</p>
                            </div>
                            <div class="jieda-reply">
                                <span class="jieda-zan" type="zan">
                                    <i class="iconfont icon-zan"></i>
                                    <em>${comment.commentGreat}</em>
                                </span>
                                <span type="reply">
                                <i class="iconfont icon-svgmoban53"></i>
                                回复
                                </span>
                                <c:if test="${sessionScope.user.userId!=comment.commentUserId&&! empty sessionScope.user}">
                                    <div class="jieda-admin">
                                    <%--<span type="edit">编辑</span>--%>
                                    <%--<span type="del">删除</span>--%>
                                        <c:if test="${article.articleOver==0&&article.articleOwner==sessionScope.user.userId}">
                                            <span class="jieda-accept" type="accept">采纳</span>
                                        </c:if>
                                    </div>
                                </c:if>
                            </div>
                        </li>
                    </c:forEach>
                    <c:if test="${page.total==0}">
                        <!-- 无数据时 -->
                        <li class="fly-none">消灭零回复</li>
                    </c:if>
                </ul>

                <%@ include file="../common/page.jsp" %>

                <div class="layui-form layui-form-pane">
                    <form action="/comment/reply/" method="post">
                        <input type="hidden" name="commentArticleId" value="${article.articleId}">
                        <input type="hidden" name="commentUserId" value="${sessionScope.user.userId}">
                        <%--<input type="hidden" name="commentParentId" value="${article.articleOwner}">--%>
                        <input type="hidden" name="commentReplyUserId" value="${article.articleOwner}">
                        <input type="hidden" name="total" value="${page.total}"/>
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea id="L_content" name="commentContent" required lay-verify="required"
                                          placeholder="请输入内容" class="layui-textarea fly-editor"
                                          style="height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="jid" value="123">
                            <button class="layui-btn" lay-filter="*" lay-submit>提交回复</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <%@ include file="../common/list-hot.jsp" %>

            <%@ include file="../common/list-ad.jsp" %>

            <div class="fly-panel" style="padding: 20px 0; text-align: center;">
                <img src="/fly-3.0/res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
                <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
            </div>

        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>

</body>
</html>